#{extends 'main.html' /} #{set title:'Invite' /} #{set 'moreScripts'}
#{script 'invite.js'/} #{/set} 

<div id="steps" class="span-24 last">
	<img id="firstImage" src="/public/images/banner02.jpg"
		alt="three steps" />
</div>

<div class="overview">
	<h4>Restaurant: ${app.restaurant.name} - Datum: ${app.date} - Uhrzeit:
		${app.time}</h4>
</div>


<div id="main" class="span-24 last">
#{form @AppointmentCreation.confirm(app.id)}
	<div class="span-12 last">
		
		<div id="padded_box_10" class="span-12 last">
			<h4>Welche Freunde m&ouml;chtest du einladen?</h4>

			 #{if friendsList}
			#{list items:friendsList, as:'friend'}
			<div class="span-6 last">
				<div class="span-2 last">
				<input
									type="checkbox" value="${friend.email}" name="friend_list"
									onclick="countInvites(this)" />
					<img src="../../public/images/unknown_person.png" height="30" />
				</div>
				<div class="span-4 last">
					<div class="txt_black_bold">${friend.firstName}
						${friend.lastName}</div>
					${friend.email}
				</div>
			</div>
			#{/list}
			#{/if}
		</div>
		<div id="padded_box_10" class="span-12 last">
			<h4>Wen noch?</h4>
			<table id="addedFriendsTable">
				<tr>
					<td></td>
					<td>Vorname</td>
					<td>Nachname</td>
					<td>Email-Adresse</td>
				</tr>
				<tr id="addedfriend1">
					<td class="inviteTableCell"><input type="checkbox" value="getEmail(this)"
						onclick="countInvites(this);" /></td>
					<td class="inviteTableCell"><input type="text"
						id="addedfriend1name" name="person_lname" size="15"></td>
					<td class="inviteTableCell"><input type="text"
						id="addedfriend1surname" name="person_fname" size="15"></td>
					<td class="inviteTableCell"><input type="text"
						id="addedfriend1mail" name="person_email" size="15"></td>
					<td class="inviteTableCell"><input type="button"
						class="button" value="+" onclick="addNewRow(this)" /></td>
				</tr>
			</table>
		</div>
		
	</div>
	<div class="span-12 last">
		<div id="padded_box_10" class="span-12 last">
			<h4>Pers&ouml;nliche Nachricht:</h4>
			<div class="span-8" last>
			<textarea id="invitationText"
				name="personal_message"></textarea>
				</div>
		</div>
		<div id="padded_box_10" class="span-12 last">
			<div class="span-6 last">
				Anzahl Personen: <input readonly="readonly" id="numberOfFriends" />
			</div>
			<div class="span-6 last">
				<input type="submit" id="submitButton" class="button"
					value="Einladung verschicken">
			</div>
		</div>
	</div>
	#{/form}
	#{ifErrors}
	<script>
		$(function() { // this will run when the document.ready event fires
			//()$("#miesepeter").overlay(); // this will show a div whose id is myDivOverlay
			$("#miesepeter").overlay({

				// custom top position
				top : 100,

				// some mask tweaks suitable for facebox-looking dialogs
				mask : {

					// you might also consider a "transparent" color for the mask
					color : '#fff',

					// load mask a little faster
					loadSpeed : 200,

					// very transparent
					opacity : 0.5
				},

				// disable this for modal dialog-type of overlays
				closeOnClick : true,

				// load it immediately after the construction
				load : true

			});
		});
	</script>



	<div class="simple_overlay_error" id="miesepeter">
		<h1>Oops…</h1>

		#{errors}
		<li>${error}</li> #{/errors}
	</div>
	#{/ifErrors}
</div>

